const examSelect = document.getElementById("exam-select");
let examChart;
let examCode;
let codeSwitch = false;

function populateExamSelect() {
    examSelect.innerHTML = '';
    Object.keys(examDetails).forEach(exam => {
        const option = document.createElement("option");
        option.value = exam;
        option.textContent = exam;
        examSelect.appendChild(option);
    });
}

function renderExamTable() {
    // 新增的表格数据
    const summaryData = examDetails[examCode];

    document.getElementById('exam-code').textContent = examCode

    // 填充表格数据
    document.getElementById('avgScore').textContent = summaryData.avg_score.toFixed(2);
    document.getElementById('passRate').textContent = summaryData.pass_rate.toFixed(2);
    document.getElementById('top3').innerHTML = summaryData.top3.map(s => '<span class="name-tag">' + (codeSwitch ? s.stu_code : s.stu_name) + '</span>').join('');
    document.getElementById('bottom3').innerHTML = summaryData.bottom3.map(s => '<span class="name-tag">' + (codeSwitch ? s.stu_code : s.stu_name) + '</span>').join('');
    document.getElementById('actualNum').textContent = summaryData.actual_num;
    document.getElementById('expectedNum').textContent = summaryData.expected_num;
}

function renderExamLevels() {
    const levels = examDetails[examCode].levels_item
    const labels = Object.keys(levels);

    const detailedDataContainer = document.getElementById('detailedData');
    detailedDataContainer.innerHTML = ''
    labels.forEach(label => {
        const studentsList = levels[label].map(l => '<span class="name-tag">' + (codeSwitch ? l.stu_code : l.stu_name) + '</span>').join('');
        const div = document.createElement('div');
        div.innerHTML = `
            <span class="level-tag">${label}</span>
            <div>${studentsList.length > 0 ? studentsList : ''}</div>
        `;
        detailedDataContainer.appendChild(div);
    });
}

function renderExamBarChart() {

    const levels = examDetails[examCode].levels_item

    const labels = Object.keys(levels);
    const counts = labels.map(label => levels[label].length);

    if (examChart) {
        examChart.destroy()
    }

    const ctx = document.getElementById('barChart').getContext('2d');
    examChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: '学生人数',
                data: counts,
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                },
                datalabels: {
                    // 使用插件在数据点上显示 grade
                    display: true,
                    align: 'top',
                    color: 'rgb(50,129,129)',
                    font: {
                        // weight: 'bold',
                        size: 12
                    },
                    formatter: (value, context) => {
                        // 仅对排名折线显示 grade
                        return context.datasets
                    }
                }
            }
        },
        plugins: [ChartDataLabels]
    });
}


function clinkCodeSwitch() {
    const studentId = document.getElementById('switch-code');
    const name = document.getElementById('switch-name');

    // 切换active类
    studentId.classList.toggle('active', !codeSwitch);
    name.classList.toggle('active', codeSwitch);

    // 切换codeSwitch的值
    codeSwitch = !codeSwitch;
    renderExamTable()
    renderExamLevels()
}

examSelect.addEventListener("change", (e) => {
    examCode = e.target.value;
    renderExamTable()
    renderExamLevels()
    renderExamBarChart()
});
